<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box{
        height: 500px;
        /*  display: flex开启弹性布局  该容器为一个块级元素 */
        display: flex;
        /* 一旦开启弹性布局 所有的容器成员 都会变成行内块 */
        /* display: inline-flex  开启的弹性布局  该容器为一个行内块 */
        /* display: inline-flex; */
        /* //属性决定主轴的方向 */
        /* flex-direction:row;
        flex-wrap:wrap; */
        /* flex-flow 是flex-direction和 flex-wrap两个的简写  */
        /* flex-flow:row wrap; */
        justify-content: center;
        align-items:stretch;
    }
    span{
        width: 200px;
        height: 50px;
        background: salmon;
        /* order  项目的排序 数值越小，越往前 */
        order:1;
        /* 缩小  flex-shrink默认值是1 如果空间不足自动搜索 如果设置flex-shrink 不会缩小  */
        flex-shrink: 0;
    }
    .con{
        display: flex;
    }
    .left{
        width: 200px;
        background: red;
        height: 500px;
    }
    .right{
        flex:1 1 auto;
        background: green;
    }
</style>
<body>
    <!-- Flex 是 Flexible Box 的缩写，意为"弹性布局" -->

    <!-- 切记  ：我们开启弹性盒子的时候  要不设置容器的属性，要不设置 项目（容器的成员） 的属性 -->

    <div class="box">
        <span>1</span>
        <!-- flex-basis 他的默认值是auto 即项目的本来大小 单独给第二个span 设置了400的大小 -->
        <span style="flex-basis: 400px;">2</span>
        <span>3</span>
        <!-- flex-grow默认是0 就算有剩下空间也不会放大 如果是1 会铺满剩余空间 -->
        <span style="order:0;">4</span>
        <!-- align-self:flex-end 只有第5个span和其他4个排列方式不一样  属性允许单个项目有与其他项目不一样的对齐方式   -->
        <span style="align-self:flex-end">5</span>
        <!-- <span>6</span>
        <span>7</span>
        <span>8</span> -->
    </div>
    <span>123</span>

    <!-- flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选 -->

    <div class="con">
        <div class="left"></div>
        <div class="right"></div>
    </div>


    <!-- bigInt  number 2^53 typeof  返回的function -->
</body>
</html>